<?php 
    $this->headScript()
        ->appendFile($this->baseUrl('ui/js/jquery/plugins/cropzoom/jquery.cropzoom.js'))
    ;
?>
<?php $this->InlineScript()->captureStart() ?>
$(document).ready(function() {

    $('#uploadForm').ajaxForm({
        beforeSubmit: function(a,f,o) {
            o.dataType = 'xml';
        },
        success: function(responseXML) {
            var $result = $('result', responseXML).text().trim();

            if($result != 1){
                var $messages = $('messages', responseXML).text().trim();
                dialogMessage($messages);
                return false;
            }

            var $imageId = $(responseXML).find("data").find("imageId").text().trim();
            $( "#crop_imageId" ).val($imageId);

            var $url = $(responseXML).find("data").find("url").text().trim(); + '?' + new Date;
            _getImageSize($url, _cropzoomInit);
            return true;
        }
    });  

    var _getImageSize = function(sUrl, fCallback)  
    {     
        var img = new Image();  
        img.src = sUrl + '?t=' + Math.random();    //IE下，加一个随机数,去掉ajax缓存  
        if ($.browser.msie)  
        {  
            img.onreadystatechange = function()  
            {  
                if (this.readyState=="loaded" || this.readyState=="complete")  
                {  
                    fCallback({width:img.width, height:img.height, url:sUrl});  
                }  
            };  
        }else if ($.browser.mozilla || $.browser.safari || $.browser.opera || $.browser.chrome)  
        {  
            img.onload = function()  
            {  
                fCallback({width:img.width, height:img.height, url:sUrl});  
            };  
        }  
        else  
        {  
            fCallback({width:img.width, height:img.height, url:sUrl});  
        }  
    };

    var _cropzoomInit = function(img) {
        var cropzoom = $('#crop_container').cropzoom({
            width:400,
            height:400,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:10,
            selector:{        
                w:200,
                h:200,
                maxWidth:'<?php echo $this->big;?>',
                maxHeight:'<?php echo $this->big;?>',
                centered:true,
                borderColor:'blue',
                borderColorHover:'red',
                //startWithOverlay:true,
                hideOverlayOnDragAndResize:true,
                showDimetionsOnDrag:false,
                showPositionsOnDrag:false,
            },
            image:{
                source: img.url,
                width: img.width,
                height: img.height,
                minZoom:10,
                maxZoom:150,
                startZoom:100
            }
        });

        $('#crop').unbind("click");
        $('#crop').click(function(){ 
            var customData = {dateTime : Math.random()};
            $("body").append("<div id='dialog-messageaa' />");  
            $( "#dialog-messageaa" ).append("a");
            
            cropzoom.send('<?php echo $this->url(array('module'=>'setup', 'controller'=>'avatar', 'action'=>'save-post'),'default',true) ?>','POST', customData,function(responseText){
                //alert(responseText);
                var json = jQuery.parseJSON(responseText);
                if(json.result != 1){
                    dialogMessage(json.messages);
                    return "";
                }

                var avatar = json.data;
                $('#cropzoom-avatar').find('img').remove();

                avatar.big = avatar.big + '?' + new Date;
                var img = $('<img />').attr('src',avatar.big);
                $('#big_avatar').find('.txt').hide().end().append(img);

                avatar.middle = avatar.middle + '?' + new Date;
                var img = $('<img />').attr('src',avatar.middle);
                $('#middle_avatar').find('.txt').hide().end().append(img);

                avatar.small = avatar.small + '?' + new Date;
                var img = $('<img />').attr('src',avatar.small);
                $('#small_avatar').find('.txt').hide().end().append(img);

                avatar.thumb = avatar.thumb + '?' + new Date;
                var img = $('<img />').attr('src',avatar.thumb);
                $('#thumb_avatar').find('.txt').hide().end().append(img);

            });
        });
    };

    <?php if(isset($this->photo)){?>
    var url = "<?php echo $this->photo->source?>";
    _getImageSize(url, _cropzoomInit);
    <?php }?>
});

<?php $this->InlineScript()->captureEnd() ?>

<style type="text/css">
    .cropzoom-source{width:410px;height:410px;border: 1px solid #CCCCCC;}
    .cropzoom-source-upload{margin:10px 0 0 0}
    .cropzoom-avatar{border:1px solid #CCCCCC; width:260px;height:410px;}
    .cropzoom-avatar img{padding:10px;}
</style>

<div class="container">
    <div class="column span-18 colborder">
        <div class="left">    
            <div><?php echo $this->translate("Source photo");?></div>
            <div class="cropzoom-source">
                <div id="crop_container"><?php echo $this->translate("No photo");?></div>
            </div>
            <div class="prepend-top">
                <form id="uploadForm" enctype="multipart/form-data" method="post" action="<?php echo $this->url(array('module'=>'setup', 'controller'=>'avatar', 'action'=>'save-upload'),'default',true) ?>">
                <input type="file" name="file"  class="ui-corner-all required" /><input type="submit" value="<?php echo $this->translate("Upload");?>" class="ui-corner-all" />
                </form>
            </div>
        </div>
        <div class="right">
            <div><?php echo $this->translate("Avatar");?></div>
            <div class="cropzoom-avatar" id="cropzoom-avatar">
                <div class="unit horizontal-center" id="big_avatar">
                    <?php if(isset($this->avatar)){?>
                    <img src="<?php echo $this->avatar->big;?>" />
                    <?php }?>
                </div>

                <div class="unit horizontal-center" id="middle_avatar">
                    <?php if(isset($this->avatar)){?>
                    <img src="<?php echo $this->avatar->middle;?>" />
                    <?php }?>
                </div>

                <div class="unit horizontal-center" id="small_avatar">
                    <?php if(isset($this->avatar)){?>
                    <img src="<?php echo $this->avatar->small;?>" />
                    <?php }?>
                </div>

                <div class="unit horizontal-center" id="thumb_avatar">
                    <?php if(isset($this->avatar)){?>
                    <img src="<?php echo $this->avatar->thumb;?>" />
                    <?php }?>
                </div>
            </div>
            <div class="prepend-top">
                <button id="crop"><?php echo $this->translate("Crop");?></button>
            </div>
        </div>    
    </div>
    <div class="column span-5 last">
        <?php echo $this->render('module_setup_script_sidebar.phtml');?>
    </div>
 </div>

